<template>
  <h1>{{article.title}}</h1>


<el-button type="primary" @click="clicktoedit" v-if="role===1" style="float:right;">编辑</el-button><p/>
    <el-tag v-for="item in article.tags"
            v-bind:key="item.tagid"
            type="info">{{item.name}}</el-tag>

  <mavon-editor v-model="article.content"
                :toolbarsFlag='false'
                defaultOpen='preview'
                :subfield="false"
                :navigation="false" style="margin-top: 1%"
                :box-shadow="false"
                previewBackground="#ffffff"
  />
</template>

<script>
import {getArticle} from "@/api/article";

export default {
  name: "ArticleItem",
  props:["articleid"],
  data(){
    return {
      article:[]
    }
  },
  methods:{
    getarticle(){
      let that=this
      getArticle(this.articleid).then(res=>{
        that.article=res.data
      }).catch(()=>{
        alert("错误加载")
      })
    },
    clicktoedit(){
      this.$router.push("/article/edit/"+this.$route.params.id)
    }

  }
  ,
  mounted() {
    this.getarticle()
  },
  computed:{
    role(){
      return this.$store.state.id
    }
  }
}
</script>

<style scoped>
.el-card{
  width: 100%;
  text-align: left;
}
.el-tag{
  margin-left: 10px;
}
</style>
